@extends("template")
@section('css')
    <style>

        .list-theme4 .list-item{
            padding: 0.2rem;
        }
        .left{
            flex: 0.5;
            text-align: center;
        }
        .left div{
            width: 1rem;
            height: 1rem;
            margin: 0 auto;
        }
        .left span{
            margin-top: 0.2rem;
            display: block;
            text-align: center;
        }
        .left img{
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
        .right{
            flex: 2;
            padding-left: 0.5rem;
        }
        .right>span{
            padding: 0.2rem;
        }
        .leftbubble{
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #FF3030;
            background-color: #fff;
            border-radius: 5px;
            display: inline-block;
            padding: 3px 10px;
        }
        .leftbubble .bottomLevel{
            position: absolute;
            border-left: 10px solid transparent;
            top: 10px;
            left: -10px;
            border-top: 10px solid #FF3030;
        }
        .leftbubble .topLevel{
            position: absolute;
            border-left: 10px solid transparent;
            top: 11px;
            left: -8px;
            border-top: 10px solid #fff;
            z-index: 100;
        }
        .right-item .left{
            order: 2;
        }
        .right-item .right{
            order: 1;
            padding-left:0;
        }
        .rightbubble{
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #FF3030;
            background-color: #fff;
            border-radius: 5px;
            display: inline-block;
            padding: 3px 10px;
        }
        .rightbubble .bottomLevel{
            position: absolute;
            border-right: 10px solid transparent;
            top: 11px;
            right: -10px;
            border-top: 10px solid #FF3030;
        }
        .rightbubble .topLevel{
            position: absolute;
            border-right: 10px solid transparent;
            bottom: 12px;
            top: 12px;
            right: -8px;
            border-top: 10px solid #fff;
            z-index: 100;
        }
        .list-item .time{
            position: absolute;
            right: 0.15rem;
            top: 0.15rem;
        }
        .back-top{
            display: none;
            width: 40px;
            height: 40px;
            position: fixed;
            bottom: 80px;
            right: 28px;
            background: url("{{asset('img/top.png')}}") no-repeat 0/cover;
            z-index: 999;
        }

    </style>
@stop
@section("content")

    <div class="g-scrollview">
        <!-- 轮播 -->
        <div class="m-slider" data-ydui-slider="{autoplay: 3000}"><!-- 参数在这里 -->
            <div class="slider-wrapper">
                <div class="slider-item">
                    <a href="#">
                        <img src="{{asset('img/i.jpg')}}">
                    </a>
                </div>
                <div class="slider-item">
                    <a href="#">
                        <img src="{{asset('img/love.jpg')}}">
                    </a>
                </div>
                <div class="slider-item">
                    <a href="#">
                        <img src="{{asset('img/you.jpg')}}">
                    </a>
                </div>
            </div>
            <div class="slider-pagination"></div><!-- 分页标识 -->
        </div>
        <!--内容-->
        <article class="m-list list-theme4">
            @foreach($data as $v)
                @if($v->id == session('uid'))
                    <div class="list-item right-item">
                        <div class="left">
                            <div><img src="http://q1.qlogo.cn/g?b=qq&nk={{$v->qq}}&s=5"></div>
                            <span>{{$v->username}}</span>
                        </div>
                        <div class="right">
                            <span class="rightbubble">
                                <h3 class="list-title">对 <span class="badge badge-radius badge-danger">{{$v->taname}}</span> 说：</h3>
                                {{$v->love_text}}
                                <span class="time">{{$v->time}}</span>
                                <span class="bottomLevel"></span><span class="topLevel"></span>
                            </span>
                        </div>
                    </div>
                @else
                    <div class="list-item">
                        <div class="left">
                            <div><img src="http://q1.qlogo.cn/g?b=qq&nk={{$v->qq}}&s=5"></div>
                            <span>{{$v->username}}</span>
                        </div>
                        <div class="right">
                            <span class="leftbubble">
                                <h3 class="list-title">对 <span class="badge badge-radius badge-danger">{{$v->taname}}</span> 说：</h3>
                                {{$v->love_text}}
                                <span class="time">{{$v->time}}</span>
                                <span class="bottomLevel"></span><span class="topLevel"></span>
                            </span>
                        </div>
                    </div>
                @endif
            @endforeach
        </article>
    </div>

    <footer class="m-tabbar">
        <a href="{{route('home')}}" class="tabbar-item  tabbar-active">
                <span class="tabbar-icon">
                    <i class="icon-home"></i>
                </span>
            <span class="tabbar-txt">首页</span>
        </a>
        <a href="{{route('deliver')}}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-like-outline"></i>
                </span>
            <span class="tabbar-txt">发表</span>
        </a>
        <a href="{{route('ucenter')}}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-ucenter-outline"></i>
                </span>
            <span class="tabbar-txt">个人中心</span>
        </a>
    </footer>

    <div class="back-top"></div>
@stop
@section("js")
    <script>
        !function ($) {

            //监听滚动条
            $('.g-scrollview').scroll(function() {
                var top = $(this).scrollTop();
                if (top > 0) {
                    $('.back-top').fadeIn();
                }
                if(top == 0){
                    $('.back-top').fadeOut();
                }
            });
            //返回顶部
            $('.back-top').click(function () {
                var set = setInterval(function () {
                    var top = $('.g-scrollview').scrollTop();
                    if (top != 0){
                        top -= 10;
                        $('.g-scrollview').scrollTop(top);
                    }else {
                        clearInterval(set);
                    }
                },1);
            });
        }(jQuery);
    </script>
@stop